<template>
	<div class="register absolute l-bg">
		<div class="l-tab-title" :class="{'l-tab-nb': current==1}" v-if="formItem === 1">
			
			<view class="wb-box">
				<!-- <van-icon name="shopping-cart-o" /> -->
				<view class="wb-1">
					{{i18n.login_register.t21}}
				</view>
				<view class="wb-2">
					{{i18n.login_register.t22}}
				</view>
			</view>

			<div class="title acea-row row-center-wrapper">
				<div class="item" :class="current === index ? 'on' : ''" v-for="(item, index) in navList"
					@click="navTap(index)" :key="index">
					{{ item }}
				</div>
			</div>
			
			<div class="list" v-if="current==0">
				<form autocomplete="off" @submit.prevent="submit">
					<div class="item" style="margin-top: 20upx;">
						<div class="acea-row row-middle ipt-box">
							<image src="/static/images/phone_1.png"></image>
							<!-- 输入手机号码 -->
							<input
								type="text"
								:placeholder="i18n.login_register.t1"
								placeholder-style="font-size: 13px"
								v-model="account"
								required
							/>
						</div>
					</div>
					<div class="item">
						<div class="acea-row row-middle ipt-box">
							<image src="/static/images/code_2.png"></image>
							<!-- 填写登录密码 -->
							<input
								type="password"
								:placeholder="i18n.login_register.t2"
								placeholder-style="font-size: 13px"
								v-model="password"
								required
							/>
						</div>
					</div>
				</form>
			</div>
		
			<div class="logon" @click="loginMobile" v-if="current==0" :hidden="current !== 0">
				<!--登录-->
				{{i18n.login_register.login}}
			</div>
			
		</div>

		<div class="whiteBg l-reg-box" style="border-radius: 0 0 8px 8px;" v-if="current==1">
			<!-- <div class="title">注册账号</div> -->
			<div class="list">

				<div class="item">
					<div class="acea-row row-middle ipt-box">
						<image src="/static/images/phone_1.png"></image>
						<!-- 输入手机号码 -->
						<input
							type="text"
							:placeholder="i18n.login_register.t1"
							placeholder-style="font-size: 13px"
							v-model="account"
						/>
					</div>
				</div>
				
				<div class="item">
					<div class="acea-row row-middle ipt-box">
						<image src="/static/images/code_1.png"></image>
						<!--填写您的登录密码-->
						<input
							type="text"
							:placeholder="i18n.login_register.t4"
							placeholder-style="font-size: 13px"
							v-model="password"
						/>
					</div>
				</div>
				
				<div class="item">
					<div class="acea-row row-middle ipt-box">
						<image src="/static/images/email.png"></image>
						<!--填写email-->
						<input
							type="text"
							:placeholder="i18n.login_register.t19"
							placeholder-style="font-size: 13px"
							class="codeIput"
							v-model="email"
						/>
					</div>
				</div>
				
				<div class="item">
					<div class="acea-row row-middle ipt-box">
						<image src="/static/images/code_2.png"></image>
						<!--填写验证码-->
						<input
							type="text"
							:placeholder="i18n.login_register.t18"
							placeholder-style="font-size: 13px"
							class="codeIput"
							v-model="commissionCode"
						/>

					</div>
				</div>

				<div class="item" v-if="isShowCode">
					<div class="acea-row row-middle ipt-box">
						<image src="/static/images/code_2.png"></image>
						<!--填写验证码-->
						<input
							type="text"
							:placeholder="i18n.login_register.t3"
							placeholder-style="font-size: 13px"
							class="codeIput"
							v-model="codeVal"
						/>
						<div class="code" @click="again"><img :src="codeUrl" /></div>
					</div>
				</div>
			
			</div>
			
			<div class="logon l-reg-log" @click="register">
				<!--注册并登陆-->
				{{i18n.login_register.t5}}
			</div>
			
			<div class="tip">
				<!-- 已有账号? -->
				{{i18n.login_register.t15}}
				<span @click="current = 0" class="font-color-red">{{i18n.login_register.t6}}</span> <!--立即登录-->
			</div>
		
		</div>
		<div class="bottom"></div>
		

	</div>
</template>

<script>
	import dayjs from "@/plugin/dayjs/dayjs.min.js";
	import sendVerifyCode from "@/mixins/SendVerifyCode";
	import {
		loginH5,
		loginMobile,
		registerVerify,
		register,
		// getCodeApi,
		getUserInfo
	} from "@/api/user";

	import {
		userLogin,
		userRegister,
		sendCode
	} from "@/api/lottery";

	import attrs, {
		required,
		alpha_num,
		chs_phone
	} from "@/utils/validate";
	import {
		validatorDefaultCatch
	} from "@/utils/dialog";
	import {
		getLogo
	} from "@/api/public";
	import {
		VUE_APP_API_URL
	} from "@/utils";
	// import { Loading } from 'vant';

	const BACK_URL = "login_back_url";

	export default {
		name: "Login",
		mixins: [sendVerifyCode],
		data: function() {
			return {
				// navList: ["账号登录", "注册账号"],
				current: 0,
				account: "",
				password: "",
				captcha: "",
				formItem: 1,
				type: "login",
				logoUrl: "",
				keyCode: "",
				codeUrl: "",
				codeVal: "",
				isShowCode: false,
				commissionCode: '',
				email: '',
				isLoginLoad: false,
			};
		},
		watch: {
			formItem: function(nval, oVal) {
				if (nval == 1) {
					this.type = 'login'
				} else {
					this.type = 'register'
				}
			},
			current: function(val) {
				if (val == 1) {
					this.isLoginLoad = false
				}
			}
		},
		mounted: function() {
			this.getCode();
			this.getLogoImage();
		},
		created() {
		  	var ws = plus.webview.currentWebview();
			if(plus.os){
				ws.setStyle(
				    {
						"statusbar" : {
						    "immersed" : "true"
						},
				        "popGesture": "none",
				        "bottom": "0px",
				        'top': "-1px"
				    }
				);
				plus.navigator.setStatusBarBackground("#eb5646");
			}
		},
		 computed: {
			i18n() {
				return this.$t('index')
			},
			navList() {
				//  ["账号登录", "注册账号"],
				return [this.i18n.login_register.t7, this.i18n.login_register.t8]
			}
		},
		onLoad(option) {
			if(option.current) {
				this.navTap(parseInt(option.current))
			}
			if(option.code) {
				this.commissionCode = option.code
			}
		},
		methods: {
			again() {
				this.codeUrl =
					VUE_APP_API_URL +
					"/sms_captcha?" +
					"key=" +
					this.keyCode +
					Date.parse(new Date());
			},
			getCode() {
				let that = this
				// getCodeApi()
				// 	.then(res => {
				// 		that.keyCode = res.data.key;
				// 	})
				// 	.catch(res => {
				// 		that.$util.Tips({
				// 			title: res
				// 		});
				// 	});
			},
			async getLogoImage() {
				let that = this; 
				// getLogo().then(res => {
				// 	that.logoUrl = res.data.logoUrl;
				// });
			},
			// 登录
			async loginMobile() {
				this.isLoginLoad = true
				let that = this;
				if (!that.account) return that.$util.Tips({
					title: this.i18n.login_register.t9  // 请填写手机号码
				});
				if (!/^[6-9]\d{9}$/i.test(that.account)) return that.$util.Tips({
					title: this.i18n.login_register.t10  /// '请输入正确的手机号码'
				});
				// if (!that.captcha) return that.$util.Tips({
				// 	title: '请填写验证码'
				// });
				// if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
				// 	title: '请输入正确的验证码'
				// });
				
				if (!that.password) return that.$util.Tips({
					title: this.i18n.login_register.t3 //// '请填写密码'
				});
				 userLogin({
						tel: that.account,
						password: that.password
				 }).then(res => {
						if (res.status == '0') {
							var token={expires_time:res.expires_time,token:"hlg_"+res.token};
							let newTime = Math.round(new Date() / 1000);
						    that.$store.commit("LOGIN", {
						    	'token': res.token,
								'time': dayjs(res.expires_time) - newTime
						    });
							const backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
							that.$Cache.clear(BACK_URL);
							// getUserInfo().then(res => {
							//that.$store.commit("SETUID", res.data.user.uid);
							if (backUrl === '/pages/lottery/index/index' || backUrl === '/pages/order_addcart/order_addcart' ||
								backUrl ===
								'/pages/user/index') {
								uni.switchTab({
									url: backUrl
								});
							} else {
								uni.switchTab({
									url: '/pages/lottery/index/index'
								});
							}
						} else {
							that.$util.Tips({
								title: res.desc
							});
						}
						// })
					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});
			},
			async register() {
				let that = this;
				console.log('请填写手机号码', that.account)
				if (!that.account) return that.$util.Tips({
					title: this.i18n.login_register.t9 /// '请填写手机号码'
				});
				if (!/^[6-9]\d{9}$/i.test(that.account)) return that.$util.Tips({
					title: this.i18n.login_register.t10 /// '请输入正确的手机号码'
				});
				// if (!that.captcha) return that.$util.Tips({
				// 	title: this.i18n.login_register.t3 //// '请填写验证码'
				// });
				// if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
				// 	title: this.i18n.login_register.t16  /// '请输入正确的验证码'
				// });
				if (!/^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[6789]\d{9}$/i.test(that.account)) return that.$util.Tips({
					title: this.i18n.login_register.t10 /// '请输入正确的手机号码'
				});
				if (!that.password) return that.$util.Tips({
					title: this.i18n.login_register.t11  /// '请填写密码'
				});
				if (this.email == '') return that.$util.Tips({
					title: this.i18n.login_register.t20 /// '您输入的密码过于简单'
				});
				userRegister({
						tel: that.account,
						auth_code: that.captcha,
						password: that.password,
						ruid: that.commissionCode,
						email: that.email
					})
					.then(res => {
						if (res.status == '0') {
							var token={expires_time:res.expires_time,token:"hlg_"+res.token};
							let newTime = Math.round(new Date() / 1000);
						    that.$store.commit("LOGIN", {
						    	'token': res.token,
								'time': dayjs(res.expires_time) - newTime
						    });
							const backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
							that.$Cache.clear(BACK_URL);
							// getUserInfo().then(res => {
							//that.$store.commit("SETUID", res.data.user.uid);
							if (backUrl === '/pages/lottery/index/index' || backUrl === '/pages/order_addcart/order_addcart' ||
								backUrl ===
								'/pages/user/index') {
								uni.switchTab({
									url: backUrl
								});
							} else {
								uni.switchTab({
									url: '/pages/lottery/index/index'
								});
							}
						} else {
							that.$util.Tips({
								title: res.desc
							});
						}
					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});
			},
			async code() {
				let that = this;
				if (!that.account) return that.$util.Tips({
					title: this.i18n.login_register.t9 //// '请填写手机号码'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
					title: this.i18n.login_register.t10  //'请输入正确的手机号码'
				});
				if (that.current == 1) that.type = "register";
				else if(that.current==0) that.type="login";
				// phone: that.account
				// type: that.type,
				// key: that.keyCode,
				// code: that.codeVal
				    var data = {
						tel: this.account,
						action: that.type
					};
					sendCode(data)
					.then(res => {
						if(res.boo == "0"){
							that.$util.Tips({
								title: this.i18n.login_register.t12  //"发送成功"
							});
							that.sendCode();
						}else{
							that.$util.Tips({
								title: res.alertData
							});
						}
					})
					.catch(res => {
						// if (res.data.status === 402) {
						// 	that.codeUrl = `${VUE_APP_API_URL}/sms_captcha?key=${that.keyCode}`;
						// 	that.isShowCode = true;
						// }
						that.$util.Tips({
							title: res.alertData
						});
					});
			},
			navTap: function(index) {
				this.current = index;
			},
			async submit() {
				let that = this;
				if (!that.account) return that.$util.Tips({
					title:  this.i18n.login_register.t13///'请填写账号'
				});
				if (!/^[\w\d]{5,16}$/i.test(that.account)) return that.$util.Tips({
					title: this.i18n.login_register.t14  ///'请输入正确的账号'
				});
				if (!that.password) return that.$util.Tips({
					title: this.i18n.login_register.t11  // '请填写密码'
				});
				loginH5({
						account: that.account,
						password: that.password,
						spread_spid: that.$Cache.get("spread")
					})
					.then(({
						data
					}) => {
						// let newTime = Math.round(new Date() / 1000);
						that.$store.commit("LOGIN", {
							'token': data.token
							// 'time': dayjs(data.expiresTime) - newTime
						});
						const backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
						that.$Cache.clear(BACK_URL);
						getUserInfo().then(res => {
							that.$store.commit("SETUID", res.data.uid);
							if (backUrl === '/pages/index/index' || backUrl ===
								'/pages/order_addcart/order_addcart' || backUrl === '/pages/user/index') {
								uni.switchTab({
									url: backUrl
								});
							} else {
								uni.switchTab({
									url: '/pages/index/index'
								});
							}
						}).catch(e => {
							that.$util.Tips({
								title: e
							});
						});
					})
					.catch(e => {
						that.$util.Tips({
							title: e
						});
					});
			}
		}
	};
</script>
<style lang="scss">
	.code img {
		width: 100%;
		height: 100%;
	}

	.acea-row.row-middle {
		input {
			margin-left: 20rpx;
		}
	}

	.l-reg-log{
		margin: 0 auto;
		width: 80%;
		font-size: 13px;
	}
	.register .whiteBg .logon{
		font-size: 14px;
		font-weight: normal;
	}
	.register .whiteBg .tip{
		font-size: 12px;
	}

	.register {
    	// background-image: url(../../../static/img/l_bg.png);
    	// background-image: none;
    	/* width: 100%; */
    	height: 100%;
		padding-top: 20upx;
		// background-color: red;
	
	}

	.register .whiteBg {
		width: 75%;
		border-radius: 8px 8px 0 0;
		background-color: #fff;
		margin: 15px auto 0 auto;
		padding: 0 30upx 0 30upx;
		box-shadow: 0px 24upx 8upx rgba(0, 0, 0, .1);
	}

	.register .whiteBg .logon{
		width: 65%;
		margin: 60upx auto 0;
	}

	.l-reg-box{
		margin: 0 auto !important;
		border-radius: 0 0 8px 8px !important;
	}
	.l-log-box{
		border-radius: 8px !important;
	}
	input:-webkit-autofill{-webkit-box-shadow: 0 0 0 1000px #fff inset}
	input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
/*背景颜色*/

box-shadow:0 0 0 60px #eee inset; 
/*字的颜色*/
-webkit-text-fill-color: #878787;}
input:focus{ outline: none;}

.ipt-box{
	padding: 16upx 0;
	border-radius: 8upx;
	background-color: #fff;
	border: 0.5px solid #ededed;
}
.wb-box{
	margin-bottom: 40upx;
	padding-bottom: 40upx;
	border-bottom: 0.5px solid #ededed;
	text-align: center;
}
.wb-1{
	padding-bottom: 12upx;
	font-size: 36rpx;
	color: #f35749;
}
.wb-2{
	font-size: 24rpx;
	color: #c8c9cc;
}
.l-bg{
	// box-shadow: 0px 24upx 8upx rgba(0, 0, 0, .1);
}
html, body{
	background-color: red;
}
</style>
